<template>
  <el-drawer
    :title="drawerTitle[drawerType]"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="clearDialog"
    custom-class="tag-drawer kpi-dimension-drawer"
    v-drawerResize
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
          <el-row>
            <el-col :span="24">
              <el-form-item label="维度名称" prop="dimensionName">
                <el-input placeholder="请输入维度名称" v-model="editForm.dimensionName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="描述" prop="description">
                <el-input
                  type="textarea"
                  placeholder="请输入描述"
                  v-model="editForm.description"
                  :rows="5"
                  resize="none"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="关联表" prop="table">
                <el-select v-model="editForm.table">
                  <el-option label="---" value=""></el-option>
                  <el-option
                    v-for="item in tableList"
                    :key="item.tableNm"
                    :label="item.tableNm"
                    :value="item.tableNm"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="关联字段" prop="field">
                <el-select v-model="editForm.field">
                  <el-option label="---" value=""></el-option>
                  <el-option
                    v-for="item in fieldList"
                    :key="item.fieldNm"
                    :label="item.fieldNm"
                    :value="item.fieldNm"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <tag-content-header>
            <template #title>
              <span class="title-text">枚举值</span>
            </template>
          </tag-content-header>
          <tag-table
            ref="table"
            @refresh="getList"
            :data="dataList"
            :loading="loading"
            :columns="columns"
            :params="params"
            :total="totalSize"
          >
          </tag-table> -->
        </el-form>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button @click="clearDialog">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false,
      drawerType: 'add',
      drawerTitle: {
        add: '新增维度',
        edit: '修改维度'
      },
      tableList: [],
      fieldList: [],
      editForm: {
        tagId: '',
        dimensionName: '',
        description: '',
        table: '',
        field: ''
      },
      oldMenuIds: [],
      editFormRules: {
        dimensionName: [{ required: true, message: '维度名称不能为空', trigger: 'blur' }],
        description: [{ max: 500, message: '描述不能超过500个字符', trigger: 'blur' }],
        table: [{ required: true, message: '关联表不能为空', trigger: 'change' }],
        field: [{ required: true, message: '关联字段不能为空', trigger: 'change' }]
      }
    }
  },
  watch: {
    'editForm.table'() {
      this.editForm.field = ''
      this.getFieldList()
    }
  },
  methods: {
    showDrawer(type, data) {
      this.drawerType = type
      this.getTable()
      if (this.drawerType === 'edit') {
        this.editForm.tagId = data.tagId
        const indexJson = JSON.parse(data.indexJson)
        this.editForm.dimensionName = indexJson.dimensionName
        this.editForm.description = indexJson.description
        this.editForm.table = indexJson.table
        this.$nextTick(() => (this.editForm.field = indexJson.column))
      }
      this.drawerVisible = true
    },
    getTable() {
      this.$ajax({
        url: this.$ajax.setUrl('der/derKpiType/getAllTable'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.tableList = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getFieldList() {
      const tableItem = this.tableList.find(item => item.tableNm === this.editForm.table)
      this.$ajax({
        url: this.$ajax.setUrl('der/derKpiType/getTableFields'),
        method: 'post',
        data: this.$ajax.setData({
          dbName: tableItem.dbName,
          plfmId: tableItem.plfmId,
          relaField: tableItem.relaField,
          tableNm: tableItem.tableNm,
          tableType: tableItem.tableType
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.fieldList = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    submit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          let config = {
            dimensionName: this.editForm.dimensionName,
            description: this.editForm.description,
            tableName: this.editForm.table,
            table: this.editForm.table,
            columnName: this.editForm.field,
            column: this.editForm.field
          }
          let params = {
            indexType: 3,
            indexJson: JSON.stringify(config)
          }
          if (this.drawerType === 'edit') params.tagId = this.editForm.tagId
          this.$ajax({
            url: this.$ajax.setUrl('IndexAllocation/addIndexConfig'),
            method: 'post',
            data: this.$ajax.setData(params)
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.clearDialog()
              this.$emit('refresh')
              this.$message.success(data.msg)
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    },
    clearDialog() {
      this.editForm.tagId = ''
      this.editForm.dimensionName = ''
      this.editForm.description = ''
      this.editForm.table = ''
      this.editForm.field = ''
      this.tableList = []
      this.fieldList = []
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
        this.drawerVisible = false
      })
    }
  }
}
</script>

<style lang="scss">
.kpi-dimension-drawer {
}
</style>
